<template>
    <div class="page-node tree-view">
        <Row>
            <Col :span="5" class="tree-panel">
            <div class="tree-title">
                <div class="all-switch" @click="allOpenClick">
                    <Icon type="plus" v-if="allOpenMark"></Icon>
                    <Icon type="minus" v-else></Icon>
                </div>
                <Checkbox @input="allCheck"></Checkbox>
                <searchInput @input="filterInput" :small="true"></searchInput>
            </div>
            <Tree class="_abs-full select-tree" visbile-key="show" :data="treeData" show-key="name" @on-select-change="selectChange" show-checkbox>
                <template slot="node" slot-scope="item">
                    {{item.data && item.data.name}}
                </template>
            </Tree>
            </Col>
            <Col :span="19" class="node-panel">
            <nodeFactory v-if="!loading && loadEnd" :node-code="nodeCode" :is-nf="isNf" :dataset-code="datasetCode" :model="nodeModel"></nodeFactory>
            </Col>
        </Row>
    </div>
</template>
<script>
import moduleStore from './store'
import Tree from '@/element/tree/index'
import $ from '@/common'
import loadModel from '@/pages/model/index'
import searchInput from '@/element/searchInput'
export default {
    moduleStore,
    data() {
        return {
            isNf: false,
            allOpenMark: false,
            nodeModel: {},
            nodeCode: null,
            loading: false,
            loadEnd: false,
            singlePage: false,
            datasetCode: null,
            pathModel: '/service/{app}/nf/model/{code}',
            pathDsModel: '/service/{app}/dataset/model/eval/{code}',
            pathCheck: '/service/{app}/security/perm/check/{code}?account_code={account_code}',
            pathRmModel: 'service/{app}/resource_mapping/model/{code}',
        }
    },
    methods: {
        allOpenClick() {
            if (this.allOpenMark) {
                this.openAll()
            } else {
                this.closeAll()
            }
            this.allOpenMark = !this.allOpenMark
        },
        allCheck(v) {
            this.checkAll(v)
        },
        selectChange(data) {
            this.updatePageComponent(data[0].code_short)
        },
        filterInput(k) {
            this.treeLocalFilter(k)
        },
        updatePageComponent(code) {
            this.loadEnd = false
            var nodeSetting = $.nodeList[code]
            //console.info($.copyJson(nodeSetting))
            this.nodeCode = code
            //判断是否采用本地模型（需在model/index中添加配置）
            if (nodeSetting && nodeSetting.param.nf_code && !loadModel[code]) {
                this.isNf = true
                this.datasetCode = nodeSetting.param.dataset_code
                $.link(this.datasetCode ? this.pathDsModel : this.pathModel, null, {
                    param: {
                        code: this.datasetCode || nodeSetting.param.nf_code
                    }
                }).then((res) => {
                    if (res.data.model && !res.data.facets) {
                        res.data.facets = [{ model: res.data.model }]
                    }
                    this.nodeModel = res.data
                    this.loadEnd = true
                    this.loading = false
                }).catch((ex) => {
                })
            } else {
                return require(['@/pages/model/' + code], (data) => {
                    var pageModel = data.default
                    if (pageModel.type !== 'rm') {
                        this.loadNode(pageModel)
                    } else {
                        $.link(this.pathRmModel, null, {
                            param: {
                                code: pageModel.code
                            }
                        }).then(({ data }) => {
                            data.type = 'rm'
                            this.loadNode(data)
                        })
                    }
                }).catch((ex) => {
                    this.parseError = true
                })
            }
        },
        loadNode(model) {
            this.nodeModel = model
            this.isNf = false
            this.loadEnd = true
            this.loading = false
        },
        checkNode(code) {
            if ($.nodeList[code] && $.nodeList[code].code) {
                return $.link(this.pathCheck, null, {
                    param: {
                        code: $.nodeList[code].code,
                        account_code: this.$store.state.user.account_code
                    }
                }).then((res) => {
                    if (!res.data) {
                        return false
                    } else {
                        this.updatePageComponent()
                        return true
                    }
                })
            } else {
                this.isIndex = true
            }
        },
    },
    created() {
        var data = this.$store.state.nodes
        this.setTreeData($.copyJson(data))
    },
    beforeCreate() {
        this.$options.components.nodeFactory = require('@/pages/nf')
    },
    components: {
        Tree,
        searchInput
    }
}
</script>
<style lang="less">
.tree-view {
    height: 100%;
    .ivu-row {
        height: 100%;
        .ivu-col {
            height: 100%;
        }
    }
    .tree-title {
        .ivu-checkbox-wrapper {
            float: left;
            display: block;
            margin-left: 6px;
            line-height: 26px;
        }
        >.all-switch {
            cursor: pointer;
            float: left;
            margin: 5px 0px 0px 4px;
        }
        div.search-input {
            margin-left: 22px;
            float: none;
            margin-right: 0;
            width: auto;
        }
    }
    .select-tree {
        clear: both;
        height: auto;
        /*top: 60px;*/
    }
    .node-panel {
        padding: 0 0 0 8px;
    }
    .tree-panel {
        border-right: 1px solid #dddee1;
        padding: 0 8px 0 0;
    }
}
</style>
